<template>
  <header class="border-b bg-white/70 backdrop-blur-xl sticky top-0 z-50 shadow-sm">
    <div class="container mx-auto px-4 py-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center gap-4">
          <motion-div
            class="w-12 h-12 bg-gradient-to-br from-slate-600 via-gray-700 to-slate-800 rounded-xl flex items-center justify-center shadow-lg"
            :while-hover="{
              scale: 1.05,
              rotate: 5,
              transition: { duration: 0.2 }
            }"
          >
            <Brain class="w-7 h-7 text-white" />
          </motion-div>
          <div>
            <h1 class="text-3xl font-bold bg-gradient-to-r from-slate-700 via-gray-800 to-slate-900 bg-clip-text text-transparent">
              智能测评中心
            </h1>
            <p class="text-slate-600">专业的认知能力评估平台</p>
          </div>
        </div>

        <div class="flex items-center gap-4">
          <!-- Quick Stats -->
          <div class="hidden md:flex items-center gap-6">
            <motion.div
              class="text-center"
              :while-hover="{ scale: 1.05 }"
              :transition="{ duration: 0.2 }"
            >
              <div class="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
                {{ testResults.length }}
              </div>
              <div class="text-xs text-slate-500">已完成测试</div>
            </motion.div>
            <motion.div
              class="text-center"
              :while-hover="{ scale: 1.05 }"
              :transition="{ duration: 0.2 }"
            >
              <div class="text-xl font-bold bg-gradient-to-r from-emerald-600 to-green-600 bg-clip-text text-transparent">
                {{ userProfile?.averageScore }}
              </div>
              <div class="text-xs text-slate-500">平均分数</div>
            </motion.div>
            <motion.div
              v-if="aiBattleResults.length > 0"
              class="text-center"
              :while-hover="{ scale: 1.05 }"
              :transition="{ duration: 0.2 }"
            >
              <div class="text-xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">
                {{ aiBattleWinRate }}%
              </div>
              <div class="text-xs text-slate-500">AI胜率</div>
            </motion.div>
            <motion.div
              class="text-center"
              :while-hover="{ scale: 1.05 }"
              :transition="{ duration: 0.2 }"
            >
              <div class="text-xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
                Lv.{{ userProfile?.level }}
              </div>
              <div class="text-xs text-slate-500">当前等级</div>
            </motion.div>
          </div>

          <!-- User Menu -->
          <div class="flex items-center gap-2">
            <button
              @click="onStartTest('profile')"
              class="flex items-center gap-2 hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 p-2 text-sm rounded-md"
            >
              <User class="w-4 h-4" />
              {{ userProfile?.name||"测试用户" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import {Brain, User} from 'lucide-vue-next';
import {motion} from 'motion-v';
const { locale, locales, setLocale, t } = useGlobalI18n();

const props = defineProps({
  testResults: {
    type: Array,
    default: () => []
  },
  userProfile: {
    type: Object,
    default: () => ({
      averageScore: 0,
      level: 1,
      name: ''
    })
  },
  aiBattleResults: {
    type: Array,
    default: () => []
  },
  aiBattleWinRate: {
    type: Number,
    default: 0
  }
});

const emit = defineEmits(['start-test']);

const onStartTest = (type) => {
  emit('start-test', type);
};
</script>
